<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
	#table{
	 margin:0 auto;
	}
	#body{
	text-align: center;
	background-color: cadetblue;
	}
</style>
</head>
<h1>用户注册</h1>
<body id="body">
	<form action="AccountServlet?method=createConfig" method="post">
		<input type="hidden" id="role_id" value="1">
	<table id="table">
		<tr>
			<td>输入用户名</td>
			<td><input type="text" maxlength="16" id="username" name="username" required="required"/>
				<span id="username_message"></span>
			</td>
		</tr>
		<tr>
			<td>输入密码</td>
			<td><input type="password" id="password" maxlength="16" name="password" required="required"/></td>
		</tr> 
		<tr>
			<td>再次输入密码</td>
			<td><input type="password" id="password_again" maxlength="16" name="password_again" required="required"/>
			<br /><span id="checkPassword"></span></td>
		</tr>
		<tr>
			<td>性别</td>
			<td><input type="radio" name="sex" value="男" checked="checked" />男 
				<input type="radio" name="sex" value="女" />女</td>
		</tr>		
		<tr>
			<td>出生日期</td>
			<td><input type="date" name="birthday" /></td>
		</tr>
		<tr>
			<td>邮箱地址</td>
			<td><input type="email" name="email" /></td>
		</tr>
		<tr>
			<td>手机号码</td>
			<td><input type="text" name="phone_number" maxlength="11" required/></td>
		</tr>	
	</table>
		<input type="submit" id="submit" name="create" value = "注册" />
		<input type = "reset" value = "重置" />
		<input type = "button" onclick="history.back();" value = "返回" />
	</form>
	
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#submit").click(function(){
			if($("#password").val() != $("#password_again").val()){
				$("#checkPassword").html("两次密码输入不同，请重新核对！");
				return false;
			}
		})
		
		
		$("#username").blur(function(){
			$.post("AccountServlet?method=ajax","username="+$("#username").val(),function(response){
				if(response == "true"){
					$("#username_message").html("账号已存在");
					$("#username_message").css("color","red");
				}else{
					$("#username_message").html("账号可注册");
					$("#username_message").css("color","blue");
				}
			})
		})

	})	
</script>
</body>
</html>